<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* ==================================================================== */
        /* CHECKBOX TYPE 8 ---------------------------------------------------- */
        /* ==================================================================== */


        [id^="checkbox-8-"] + label {
            background-color: #FFF;
            padding: 9px;
            border-radius: 50px;
            display: inline-block;
            position: relative;
            margin-right: 30px;
            width: 40px;
            height: 15px;
        }

        [id^="checkbox-8-"] + label:after {
            content: ' ';
            position: absolute;
            background: #E6332C;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 100px;
            box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
        }

        [id^="checkbox-8-"] + label:before {
            content: ' ';
            position: absolute;
            background: white;
            top: 2px;
            left: 2px;
            z-index: 99999;
            width: 29px;
            height: 29px;
            border-radius: 100px;
            box-shadow: 0 0 2px rgba(0,0,0,0.5), inset 0 -18px 15px -10px rgba(0,0,0,0.05);
        }


        [id^="checkbox-8-"] + label:active {
            box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
        }

        [id^="checkbox-8-"]:checked + label:before {
            content: ' ';
            position: absolute;
            left: 27px;
            border-radius: 100px;
        }

        #checkbox-8-1 + label, #checkbox-8-2 + label {
            overflow: hidden;
        }

        [id^="checkbox-8-"]:checked + label:after {
            content: ' ';
            font-size: 1.5em;
            position: absolute;
            background: #63C99C;
        }

        #checkbox-8-2 + label:after, #checkbox-8-2 + label:before, #checkbox label,
        #checkbox-8-4 + label:after, #checkbox-8-4 + label:before, #checkbox label {
            -webkit-transition: all 0.1s ease-in;
            transition: all 0.1s ease-in;
        }

        #checkbox-8-3 + label:before, #checkbox-8-4 + label:before {
            width: 35px;
            height: 35px;
            top: -1px;
            left: -1px;
        }

        #checkbox-8-3:checked + label:before, #checkbox-8-4:checked + label:before {
            left: 27px;
        }

    </style>
</head>
<body>
<div class="center" style="width: 361px;">
    <input type="checkbox" id="checkbox-8-1"><label for="checkbox-8-1"></label>
    <input type="checkbox" id="checkbox-8-2" checked=""><label for="checkbox-8-2"></label>
    <input type="checkbox" id="checkbox-8-3"><label for="checkbox-8-3"></label>
    <input type="checkbox" id="checkbox-8-4"><label for="checkbox-8-4"></label>
</div>
</body>
</html>